<template>
  <div>
    <!-- 全部新碟 -->
    <NewSong :song="'全部新碟'" :isShow="true" />
    <!-- 分页器 -->
    <Pagination
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      @currentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import debounce from 'lodash/debounce'
import NewSong from '../components/NewSong'
import Pagination from '@/components/pagination'

export default {
  name: 'AllSongs',
  data() {
    return {
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 总数
      total: 500
    }
  },
  // 映射在计算属性中
  computed: {
    ...mapState('albumlist', ['albumList'])
  },
  // 一上来就发请求
  mounted() {
    this.getAlbumList()
  },
  // 映射更新数据的方法
  methods: {
    ...mapActions('albumlist', ['getAlbumList']),

    //点击分页器获取到最新的当前页数
    handleCurrentChange: debounce(
      function (currentPage) {
        this.currentPage = currentPage
      },
      200,
      { maxWait: 500 }
    )
  },
  components: {
    NewSong,
    Pagination
  }
}
</script>

<style lang="less" scoped>
</style>